<!doctype html>
<html xmlns:th="http://www.thyeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="/favicon.png" rel="bookmark" type="image/png">
    <link href="/favicon.png" rel="icon" type="image/png">
    <link href="/favicon.png" rel="short icon" type="image/png">
    <title>商务部业务系统统一平台-全国汽车流通信息管理</title>

    <style type="text/css">
        html {
            font-family: sans-serif;
            line-height: 1.15;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -ms-overflow-style: scrollbar;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: #FFFFFF;
            color: #212529;
            font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
            font-size: 16px;
            font-weight: 400;
            line-height: 1.5;
            margin: 0;
            text-align: left;
        }

        .header {
            background-color: #FCFCFC;
            border-top: 12px solid #DF0901;
            padding: 10px 5px;
        }

        .header-inner {
            text-align: center;
        }

        .logo-box {
            padding: 0;
        }

        .logo-box img {
            vertical-align: middle;
        }

        .logo-box img:last-child {
            margin: 5px 0 0 15px;
        }

        .application-title {
            color: #A00000;
            font-size: 26px;
            font-weight: 600;
            letter-spacing: 2px;
            line-height: 42px;
            margin-top: 5px;
        }

        @media screen and (min-width: 580px) {
            .header-inner {
                display: table;
                margin: auto;
            }

            .logo-box {
                display: table-cell;
            }

            .application-title {
                display: table-cell;
                margin: 0;
                padding-left: 20px;
                vertical-align: middle;
            }
        }

        .content {
            font-size: 14px;
            padding: 10px;
        }

        .content .title {
            line-height: 35px;
            padding: 0 10px;
            position: relative;
            font-weight: 600;
        }

        .content .title:before {
            background-image: url('/images/car.png');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 8px;
            width: 20px;
            height: 20px;
        }

        .content .title span {
            padding-left: 12px;
        }

        .content table {
            background-color: #FFFFFF;
            border: 1px solid #DDDDDD;
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
            width: 100%;
        }

        .content tbody {
            margin: 0;
            padding: 0;
        }

        .content tr th,
        .content tr td {
            border-style: none;
            display: block;
            line-height: 24px;
            padding: 6px;
            text-align: left;
        }

        .content tr th {
            background-color: #F0F4F7;
            font-weight: 600;
        }

        .content .error-message {
            color: #A00000;
            font-weight: 600;
            line-height: 35px;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="header-inner">
            <div class="logo-box">
                <img class="logo" src="/images/national_emblem.png" alt="中华人民共各国国徽">
                <img class="logo-text" src="/images/business_platform.png" alt="业务系统统一平台">
            </div>
            <div class="application-title">全国汽车流通信息管理</div>
        </div>
    </div>
    <div class="content">
        <div class="title">
            <span>报废机动车详情</span>
        </div>
        <div th:if="${order.id} eq 0" class="error-message">数据不存在或校验码有误！</div>
        <table th:if="${order.id} neq 0">
            <tbody>
                <tr>
                    <th>企业名称：</th>
                    <td th:text="${order.companyName}"></td>
                </tr>
                <tr>
                    <th>回收证明编号：</th>
                    <td th:text="${order.certificateNumber}"></td>
                </tr>
                <tr>
                    <th>车辆识别代号：</th>
                    <td th:text="${order.vin}"></td>
                </tr>
                <tr>
                    <th>交售日期：</th>
                    <td th:text="${#dates.format(order.deliveryDate, 'yyyy年M月d日')}"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>
